<template>
  <div>
    <!-- <el-col :span="4" :xs="24"> -->
    <!-- 查询设备输入框 -->
    <!-- <el-card> -->
    <!-- <div>
          <el-input
            v-model="deptName"
            :placeholder="$t('device.cardConfig.input.department')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div> -->
    <!--树形控件_部门数据-->
    <!-- <el-scrollbar style="height:70vh;">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            ref="tree"
            accordion
            node-key="id"
            :default-expanded-keys="expandedKeys"
            :highlight-current="true"
            @node-click="handleNodeClick"
          />
        </el-scrollbar> -->
    <!-- </el-card> -->
    <!-- </el-col> -->

    <el-col :span="24" :xs="24" style="height: 80vh;">
      <div class="cardBox">
        <div class="editCard">修改卡组</div>
        <ul>
          <!-- 所属卡组 -->
          <li>
            {{ $t('device.cardConfig.group') }}：
            <span v-if="dept"> {{ dept.label }}</span>
          </li>
          <li class="cardSize">
            <!-- 宽x高 -->
            {{ $t('device.cardConfig.width') }} x
            {{ $t('device.cardConfig.height') }}：
            <el-input
              v-model="widths"
              @input="panWidth"
              maxlength="3"
              minlength="1"
              placeholder="请设置宽度"
              style="width:120px"
            ></el-input
            ><span>x</span>
            <el-input
              v-model="heights"
              @input="panHeight"
              maxlength="3"
              minlength="1"
              placeholder="请设置高度"
              style="width:120px"
            ></el-input>
          </li>
          <p class="pshow">{{ widthText }}</p>
          <p class="pshow">{{ heightText }}</p>
          <li>
            <!-- 卡类型 -->
            {{ $t('device.cardConfig.type') }}：
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="(item, index) in options"
                :key="item.fType"
                :label="item.fDescription"
                :value="item.fType"
                @click.native="programNoChange(index)"
                style="text-indent:1em"
              >
              </el-option>
            </el-select>
          </li>
          <p class="pshow">{{ cardText }}</p>
        </ul>
        <div style="margin: 0 auto;width: 400px;">
          <el-button
            type="primary"
            @click="bthSucc"
            style="width:400px;padding: 12px 0;font-size: 16px;font-weight: 700;"
          >
            {{ $t('device.cardConfig.button.edit') }}</el-button
          >
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
import { getCard } from '@/api/system/program'
import { editConfig, cardType } from '@/api/equipment/list.js'
import { mapState, mapMutations } from 'vuex'
import { getToken } from '@/utils/auth' // 获取token
import { treeselect } from '@/api/system/dept' // 导入Tree树形Api
import Treeselect from '@riophae/vue-treeselect' // 导入Tree树形控件组件

export default {
  name: 'CardConfig',
  data () {
    return {
      expandedKeys: [], //默认打开的节点
      deptName: undefined,
      deptOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      options: undefined,
      value: undefined,
      widthText: '',
      heightText: '',
      cardText: '',
      a: false,
      b: false,
      c: false,
      widths: undefined,
      heights: undefined,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      configCard: {
        width: undefined,
        height: undefined,
        deptId: undefined,
        id: undefined,
        fType: undefined
      },
      names: '',
      cardType: undefined
    }
  },
  mounted () {
	cardType().then(res => {
	  this.options = res.data
	})
    if (this.$store.state.deptId) {
      this.configCard.deptId = this.$store.state.deptId
      this.getRevise()
    }
  },
  watch: {
    // 根据名称筛选部门树
    // deptName (val) {
    //   this.$refs.tree.filter(val)
    // },
    // deptOptions: {
    //   handler () {
    //     this.deptOptions.forEach(item => {
    //       this.expandedKeys.push(item.id)
    //     })
    //   },
    //   deep: true
    // },

    '$store.state.deptId' (val) {
      console.log(val)
      this.configCard.deptId = val
      this.getRevise()
    }
  },
  methods: {
    /** 查询部门下拉树结构*/
    // getTreeselect () {
    //   treeselect().then(response => {
    //     this.deptOptions = response.data
    //     this.configCard.deptId = this.deptOptions[0].id
    //     this.names = this.deptOptions[0].label
    //     this.getRevise() //设备信息
    //     this.$store.commit('updateCollapse', this.deptOptions[0].id)
    //   })
    // },
    // 获取要修改的设备信息
    getRevise () {
      getCard(this.configCard.deptId).then(res => {
        this.configCard.deptId = res.data.deptId
        this.configCard.width = res.data.width
        this.configCard.height = res.data.height
        this.configCard.fType = res.data.fType
        this.configCard.id = res.data.id
        this.widths = res.data.width
        this.heights = res.data.height
        this.value = res.data.fType
      })
    },
    // 筛选节点
    // filterNode (value, data) {
    //   // console.log(!value)
    //   if (!value) return true
    //   return data.label.indexOf(value) !== -1
    // },
    programNoChange (index) {
      this.configCard.fType = this.options[index].fType
    },
    panWidth (val) {
      let reg = /[0-9]{1,3}/
      if (val == '') {
        this.widthText = '宽度不能为空'
        this.a = false
      } else if (!reg.test(val)) {
        this.widthText = '请输入数字'
        this.a = false
      } else {
        this.configCard.width = parseInt(val)
        this.widthText = ''
        this.a = true
        return
      }
    },
    bthSucc () {
      this.$confirm('是否确认修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(this.configCard)
        editConfig(this.configCard).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    panHeight (val) {
      let reg = /[0-9]{1,3}/
      if (val == '') {
        this.heightText = '高度不能为空'
        this.b = false
      } else if (!reg.test(val)) {
        this.heightText = '请输入数字'
        this.b = false
      } else {
        this.configCard.height = parseInt(val)
        this.heightText = ''
        this.b = true
        return
      }
    },
    panType (val) {
      let reg = /[0-9]{1}/
      if (val == '') {
        this.cardText = '卡类型不能为空'
        this.c = false
      } else if (!reg.test(val)) {
        this.cardText = '请输入数字'
        this.c = false
      } else {
        this.configCard.fType = parseInt(val)
        this.cardText = ''
        this.c = true
        return
      }
    }
  },
  computed: {
    ...mapState({
      dept: state => state.tree.dept,
      deptId: state => state.tree.dept.id
    })
  }
}
</script>

<style lang="scss" scoped="scoped">
* {
  margin: 0;
  padding: 0;
}
.cardBox {
  border: 1px solid gray;
  margin: 20px auto;
  width: 70%;
  height: 500px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #cdd3ca;
  .editCard {
    text-align: center;
    background-color: #157bd7;
    padding: 10px;
    color: #fff;
    font-weight: 700;
  }
  ul {
    margin-top: 30px;
    .pshow {
      width: 400px;
      margin: 5px auto;
      color: red;
    }
    li {
      width: 400px;
      padding-left: 10px;
      height: 50px;
      margin: 10px auto;
      line-height: 50px;
      list-style: none;
      border: 1px solid #304156;
      border-radius: 5px;
    }
    .cardSize {
      span {
        margin: 0 10px;
      }
    }
  }
}
</style>
